<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="data.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            width: 1226px;
            margin: 50px auto 0;
            list-style: none;
        }
        li{
            width: 220px;
            height: 380px;
            float: left;
            margin-bottom: 30px;
            margin-right: 25px;
        }
        img{
            width: 220px;
            /* height: 65%; */
        }
    </style>
</head>
<body>
    <ul class="list">
        <li id="num" class="goodsId">
            <a href="" class="goodsImg"><img src="http://img11.360buyimg.com/n1/jfs/t1/200413/1/10468/288703/6152f317Ed217033e/b8a953e0b566126f.jpg"></a>
            <div class="goodsName">新品华为平板Matepad Pro 12.6/10.8英寸娱乐二合一平板电脑鸿蒙HarmonyOS 【12.6】灰色丨8G+128G WIFI版 官方标配</div>
            <div class="goodsPrice">5999.00</div>
        </li>
        <li id="num" class="goodsId">
            <a href="" class="goodsImg"><img src="http://img11.360buyimg.com/n1/jfs/t1/200413/1/10468/288703/6152f317Ed217033e/b8a953e0b566126f.jpg"></a>
            <div class="goodsName">新品华为平板Matepad Pro 12.6/10.8英寸娱乐二合一平板电脑鸿蒙HarmonyOS 【12.6】灰色丨8G+128G WIFI版 官方标配</div>
            <div class="goodsPrice">5999.00</div>
        </li>
    </ul>
</body>
<script>
    var list = document.getElementsByClassName("list")[0];
    var num = document.getElementById("num");
    var goodsId = document.getElementsByClassName("goodsId")[0];
    var goodsImg = document.getElementsByClassName("goodsImg")[0];
    var goodsName = document.getElementsByClassName("goodsName")[0];
    var goodsPrice = document.getElementsByClassName("goodsPrice")[0];

    var html = "";
    var assignment = data.list;
    console.log(assignment)
    for(var i = 0 ; i < assignment.length ; i++){
        var chgeid = assignment[i].id;
        num.setAttribute("id" , "chgeid");
        var chgegid = assignment[i].goodsId;
        goodsId.setAttribute("class" , "chgegid");

        var chgegimg = assignment[i].goodsImg;
        
        var chgegName = assignment[i].goodsName;
        goodsName.innerText = chgegName;
        var chgegPrice = assignment[i].goodsPrice;
        goodsPrice.innerText = chgegPrice;

        html += "<li>" + `<img src="https:${chgegimg}">` + "<div>" + goodsName.innerText + "</div>" + "<div>" + goodsPrice.innerText + "</div>" + "</li>";
    }
    list.innerHTML = html;
</script>
</html>